<template>
  <div class="points-exchange-container p-4 pb-20">
    <!-- 页面头部 -->
    <div class="flex items-center mb-6">
      <div class="back-button" @click="goBack">
        <van-icon name="arrow-left" class="h-6 w-6" />
      </div>
      <h1 class="text-xl font-bold ml-2">积分兑换</h1>
    </div>
    
    <!-- 数据贡献卡片 -->
    <div class="card mb-6">
      <div class="card-content p-6">
        <!-- <div class="mb-4">
          <h2 class="text-lg font-semibold text-slate-800">数据贡献</h2>
        </div> -->
        
        <div class="space-y-4">          
          <div>
            <label for="contribution-data" class="block text-sm font-medium text-slate-700 mb-1">
              数据贡献hash
            </label>
            <van-field
              v-model="contributionData"
              id="contribution-data"
              type="textarea"
              rows="4"
              placeholder="请输入或粘贴数据贡献hash"
              class="custom-textarea min-h-[120px]"
            />
            <p class="text-xs text-slate-500 mt-1">
              请在安瞳APP中，数据贡献中下载或者复制对应的贡献hash
            </p>
          </div>
          
          <van-button 
            class="w-full bg-blue-600 hover:bg-blue-700 submit-button" 
            @click="handleSubmit"
            :loading="isSubmitting"
          >
            {{ isSubmitting ? "提交中..." : "确认提交" }}
          </van-button>
        </div>
      </div>
    </div>
    
    <!-- 贡献说明提示框 -->
    <div class="alert bg-blue-50 border-blue-200 text-blue-800 p-4 rounded-md">
      <div class="flex">
        <van-icon name="info-o" class="h-4 w-4 mr-2 mt-0.5" />
        <div class="text-sm">
          <div class="font-medium mb-1">贡献数据说明</div>
          <p>1. 每条有效数据可获得HDFS，具体以审核结果为准</p>
          <p>2. 数据需真实有效，伪造数据将被系统识别并拒绝</p>
          <p>3. HDFS可用于兑换其他数字资产</p>
          <p>4. 数据提交后24小时内完成审核，请耐心等待</p>
        </div>
      </div>
    </div>
    
    <!-- 最近贡献记录 -->
    <div class="mt-6">
      <h3 class="text-lg font-semibold text-slate-800 mb-4">最近贡献记录</h3>
      
      <div class="space-y-3">
        <div v-if="isLoading" class="text-center py-8 text-slate-500">
          加载中...
        </div>
        <div v-else-if="recentContributions.length > 0">
          <div 
            v-for="(contribution, index) in recentContributions" 
            :key="contribution.id || index"
            class="contribution-record"
          >
            <div class="flex items-center justify-between">
              <div>
                <div class="flex items-center">
                  <span class="text-slate-800 font-medium">贡献：{{contribution.pointNum}}</span>
                  <span :class="`ml-2 text-sm ${getStatusColor(contribution.payStatus)}`">{{ getStatusText(contribution.payStatus) }}</span>
                </div>
                <div class="text-sm text-slate-500 mt-1">{{ contribution.createdAt }}</div>
              </div>
              <div class="text-blue-600 font-semibold">+{{ formatNumber(contribution.amount) }} HDFS</div>
            </div>
            
            <div class="mt-2 pt-2 border-t border-slate-100">
              <div class="text-xs text-slate-500 break-all">
                <span class="font-medium">Hash: </span>
                {{ contribution.hashTx && typeof contribution.hashTx === 'string' ? 
                   (contribution.hashTx.length > 40 ? contribution.hashTx.substring(0, 40) + '...' : contribution.hashTx) : 
                   '未提供' }}
              </div>
            </div>
          </div>
        </div>
        
        <div v-else-if="!isLoading" class="text-center py-8 text-slate-500">
          暂无贡献记录
        </div>
      </div>
    </div>
    
    <!-- 提交成功提示 -->
    <van-dialog
      v-model:show="showSuccessDialog"
      title="提交成功"
      confirm-button-text="我知道了"
      :show-cancel-button="false"
    >
      <div class="success-dialog-content">
        <van-icon name="checked" size="48" class="success-icon" />
        <div class="success-message">您的数据贡献已提交成功！</div>
        <div class="success-tips">
          HDFS将在审核后到账，请耐心等待
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showLoadingToast } from 'vant'
import { exchangeContributo,contributorList } from '@/api/circulation'
import { formatNumber } from '@/utils/utils'


const router = useRouter()
const contributionData = ref('')
const isSubmitting = ref(false)
const showSuccessDialog = ref(false)
const isLoading = ref(false)

// 贡献记录
const recentContributions = ref([])

// 获取最近贡献记录
const fetchRecentContributions = async () => {
  isLoading.value = true
  try {
    const res = await contributorList({page: 1,size: 10})
    if (res.code === 0 && res.data && res.data.list) {
      recentContributions.value = res.data.list
    } else {
      showToast(res.message || '获取贡献记录失败')
    }
  } catch (error) {
    console.error('获取贡献记录失败:', error)
    showToast('获取贡献记录失败，请稍后重试')
  } finally {
    isLoading.value = false
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchRecentContributions()
})

// 返回上一页
const goBack = () => {
  router.back()
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    '0': '待结算',
    '1': '已结算',
    '2': '已拒绝'
  }
  return statusMap[status] || status
}

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    '0': 'text-amber-600',
    '1': 'text-green-600',
    '2': 'text-red-600'
  }
  return colorMap[status] || ''
}

// 提交表单
const handleSubmit = async () => {
  if (!contributionData.value.trim()) {
    showToast('请输入数据贡献hash')
    return
  }
  
  isSubmitting.value = true
  try {
    const result = await exchangeContributo({
      txHash: contributionData.value
    })
    
    if (result.code === 0) {
      showLoadingToast().close()
      showSuccessDialog.value = true
      
      // 清空表单
      contributionData.value = ''
      
      // 刷新贡献记录
      fetchRecentContributions()
    }
  } catch (error) {
    console.error('提交数据贡献失败:', error)
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
/* 全局样式 */
.points-exchange-container {
  min-height: 100vh;
  background-color: #f8fafc;
  padding-bottom: 5rem;
  padding: 1rem;
}

/* 工具类 */
.p-4 {
  padding: 1rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-4 {
  padding: 1rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

.space-y-3 > * + * {
  margin-top: 0.75rem;
}

.w-full {
  width: 100%;
}

.h-6 {
  height: 1.5rem;
}

.w-6 {
  width: 1.5rem;
}

.h-4 {
  height: 1rem;
}

.w-4 {
  width: 1rem;
}

.min-h-\[120px\] {
  min-height: 120px;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.text-center {
  text-align: center;
}

.text-xl {
  font-size: 1.25rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-sm {
  font-size: 0.875rem;
}

.text-xs {
  font-size: 0.75rem;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.text-slate-800 {
  color: #1e293b;
}

.text-slate-700 {
  color: #334155;
}

.text-slate-500 {
  color: #64748b;
}

.text-blue-800 {
  color: #1e40af;
}

.text-blue-600 {
  color: #2563eb;
}

.text-amber-600 {
  color: #d97706;
}

.text-green-600 {
  color: #16a34a;
}

.text-red-600 {
  color: #dc2626;
}

.bg-blue-50 {
  background-color: #eff6ff;
}

.bg-blue-600 {
  background-color: #2563eb;
}

.border-blue-200 {
  border-color: #bfdbfe;
}

.border-slate-100 {
  border-color: #f1f5f9;
}

.border-t {
  border-top-width: 1px;
}

.rounded-md {
  border-radius: 0.375rem;
}

.block {
  display: block;
}

.break-all {
  word-break: break-all;
}

/* 组件样式 */
.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: transparent;
  border-radius: 9999px;
  cursor: pointer;
}

.back-button:active {
  background-color: rgba(0, 0, 0, 0.05);
}

.card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.card-content {
  padding: 1.5rem;
}

.custom-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #1e293b;
  background-color: white;
}

.custom-textarea {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #1e293b;
  background-color: white;
  min-height: 120px;
  resize: vertical;
}

.submit-button {
  height: 2.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  font-size: 0.875rem;
  background-color: #2563eb;
  color: white;
  transition: background-color 0.2s;
}

.submit-button:hover {
  background-color: #1d4ed8;
}

.alert {
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  padding: 1rem;
  border-radius: 0.375rem;
}

.contribution-record {
  background-color: white;
  border-radius: 0.375rem;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* 成功弹窗样式 */
.success-dialog-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.success-icon {
  color: #16a34a;
  margin-bottom: 1rem;
}

.success-message {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.success-tips {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.5;
}

/* Vant 组件样式覆盖 */
:deep(.van-field__control) {
  min-height: 24px;
}

:deep(.van-button--default) {
  color: white;
}

:deep(.van-dialog__header) {
  padding-top: 20px;
  font-weight: 600;
  font-size: 18px;
}

:deep(.van-dialog__message) {
  padding: 0;
}

:deep(.van-dialog__footer) {
  padding: 8px 16px 16px;
}

:deep(.van-button--default) {
  background-color: #2563eb;
  border-color: #2563eb;
  color: white;
}
</style>